<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Ray Tools</title>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    <script src="raydreams.js"></script>
    <script src="people-data.js"></script>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <script type="text/javascript">

		// the data table itself
        var dataTable = null;

        jQuery(document).ready(function () {

        	dataTable = jQuery("#dataTable").raytable({
            	datasource: { data: [], keyfield: 'id' },
            	columns: [
                    { title: "Info", icons: [{ glyph: "glyphicon-info-sign", handler: iconAction, data:"id" }], renderIf: isManager },
                    { field: "firstName", title: "First Name", sort:true },
                    { field: "lastName", title: "Last Name", sort: true },
                    { field: "title", title: "Title" },
                    { field: "grade", title: "Grade", sort: true },
                    { field: "ssn", title: "SSN"  },
                    { field: "birthDate", title: "DOB", sort: true, format: parseDate },
                    { title: "Delete", icons: [{ glyph: "glyphicon-trash", handler: iconAction, data: "id" }] }
                ],
            	pagesize: 17,
            	maxPageButtons: 5,
            	rowNumbers: true,
            	rowClickHandler: rowAction
        	});

            jQuery(".glyphicon").css('cursor', 'pointer');
            
            // load some default
            //doLoad(jQuery("#dataTable"));
                                 
        });
		
		// load some data
        function doLoad(sender) {
        	// how many records to bind
        	var size = jQuery("#sizeMenu").val();
        	
        	if (size < 0)
            	{dataTable.data(myData,'id');}
            else if (size == 0)
            	{dataTable.data([],'id');}
            else
            	{dataTable.data(myData.slice(0,size),'id');}
        }

		// icon clicked event handler
        function iconAction(event)
        {
            // jquery to get the record ID back out
            var data = jQuery(event.target).data('ray-data');
            alert('glyph icon data is ' + data);
            //alert('You clicked the icon with data = ' + event.data.id + ' on row ' + event.data.rowIdx );
        }
        
        // row clicked handler
        function rowAction(event)
        {
            // jquery to get the record ID back out
            //var id = jQuery(event.target).data('ray-key');
            alert('You clicked row ' + event.data.rowIdx + ' with object ID ' + event.data.id );
        }
        
        // boolean handler to determine if the cell content is rendered
    	function isManager(item)
    	{
    		return (item.grade > 4);
    	}
    	
    	// custom format handler
    	function parseDate(item)
    	{
    		// source is ISO 8601
    		var d = new Date(item.birthDate);
    		return d.toDateString();
    	}

    </script>

	<style type="text/css">
		#dataTable table tr:hover td { background-color: palegoldenrod; }
	</style>
 
</head>
<body>
    <div style="margin:auto; width:80%">
        <h3>Ray Table Demo</h3>
        <form>
        <div class="form-group form-inline" style="margin-bottom:10px;">
        	<input type="button" onclick="doLoad(this)" value="Load Some Data" class="btn btn-default" />
        	<select name="sizeMenu" id="sizeMenu" class="form-control" style="width:100px;">
        		<option value="-1">All Records</option>
        		<option value="50">50 Records</option>
        		<option value="100">100 Records</option>
        		<option value="500">500 Records</option>
        		<option value="0">Empty</option>
        	</select>
        </div>
        </form>
        <div>Random Data generated by <a href="https://www.mockaroo.com/">Mockaroo</a></div>
        <div id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="80%">
            <!--<thead>
                <tr>
                    <th data-ray-field="firstName">First Name</th>
                    <th data-ray-field="lasName">Last Name</th>
                    <th data-ray-field="gender">Gender</th>
                    <th data-ray-field="email">Email</th>
                    <th data-ray-field="title">Title</th>
                    <th data-ray-field="city">City</th>
                </tr>
            </thead>-->
        </div>
        <div><a href="https://github.com/GrumpyCockatiel/raytools">Download or Clone from github</a></div>
        <div>&copy;2016-2018 by Tag Guillory</div>
    </div>
</body>

</html>
